<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to your ExpressLRS System</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="main.css" />
<style>
.hide {display: none;}
</style>
<script>
var websock;
function start() {
document.getElementById("logField").scrollTop = document.getElementById("logField").scrollHeight;
websock = new WebSocket('ws://' + window.location.hostname + ':81/');
websock.onopen = function (evt) { console.log('websock open'); };
websock.onclose = function(e) {
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
setTimeout(function() {
start();
}, 1000);
};
websock.onerror = function (evt) { console.log(evt); };
websock.onmessage = function (evt) {
console.log(evt);
var d = new Date();
var n = d.toISOString();
document.getElementById("logField").value += n + ' ' + evt.data + '\n';
document.getElementById("logField").scrollTop = document.getElementById("logField").scrollHeight;
};
}
function saveTextAsFile() {
var textToWrite = document.getElementById('logField').value;
var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
var downloadLink = document.createElement("a");
downloadLink.download = "tx_log.txt";
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null) {
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
</script>
</head>
<body onload="javascript:start();">
<section id="header">
<div class="inner">
<img src="" height="250" width="250" style="padding:20px;"></a>
<h1>Welcome to your <b>ExpressLRS</b><br/> update page</h1>
<p>From here you can update the firmwares on your R9M Tx module and WiFi Backpack module</p>
<p><b>Firmware Rev.  </b><var id="FirmVersion">1.0</var></p>
</div>
</section>
<br>
<section id="one" class="main style1">
<div class="container">
<div align="left">
<fieldset>
<legend>
<h2>Firmware Update Status:</h2>
</legend>
<div>Use the following command to connect the websocket using 'curl', which is a lot faster over the terminal than browser:</div>
<textarea id="curlCmd" rows="24" cols="80" style="margin: 0px; height: 270px; width: 350px;background-color: #252525;Color: #C5C5C5;border-radius: 5px;border: none;font-size: 11pt;">
curl --include \
 --output - \
 --no-buffer \
 --header "Connection: Upgrade" \
 --header "Upgrade: websocket" \
 --header "Host: example.com:80" \
 --header "Origin: http://example.com:80" \
 --header "Sec-WebSocket-Key: SGVsbG8sIHdvcmxkIQ==" \
 --header "Sec-WebSocket-Version: 13" \
 http://elrs_tx.local:81/
</textarea>
<div>Alternatively, you can use the log area below to view messages:</div>
<textarea id="logField" rows="24" cols="80" style="font-size: 11pt;">BEGIN LOG</textarea><br/>
<button type="button" onclick="saveTextAsFile()" value="save" id="save">Save log to file</button>
</fieldset>
</div>
<hr>
<div align="left">
<fieldset>
<legend>
<h2>R9M Tx Firmware Update:</h2>
</legend>
<form method='POST' action='/upload' enctype='multipart/form-data'>
<input type='file' accept='.bin,.elrs' name='firmware' id='stm_fw'>
<input type='text' value='0x0000' name='flash_address' size='6' id='stm_addr' class="hide">
<input type='submit' value='Upload and Flash R9M Tx' id='stm_submit' disabled='disabled'>
</form>
<div style="color:red;"><span id="stm_message">CAUTION! Be careful to upload the correct firmware file, otherwise a bad flash may occur! If this happens you will need to re-flash the module's firmware via USB/Serial.</span></div>
</fieldset>
</div>
<hr>
<div align="left">
<fieldset>
<legend>
<h2>WiFi Backpack Firmware Update:</h2>
</legend>
<form method='POST' action='/update' enctype='multipart/form-data'>
<input type='file' accept='.bin,.bin.gz' name='backpack_fw' id='esp_fw'>
<input type='submit' value='Flash WiFi Backpack' id='esp_submit' disabled='disabled'>
</form>
<div style="color:red;"><span id="esp_message">CAUTION! Be careful to upload the correct firmware file, otherwise a bad flash may occur! If this happens you will need to re-flash the module's firmware via USB/Serial.</span></div>
</fieldset>
</div>
<script type="text/javascript">
document.getElementById('esp_fw').onchange = function (ev) {
const esp_message = document.getElementById('esp_message');
const FIRMWARE_PATTERN = /backpack\.bin$/g;
const uploadButton = document.getElementById('esp_submit');
const value = ev.target.value;
if (FIRMWARE_PATTERN.test(value)) {
uploadButton.removeAttribute('disabled');
esp_message.innerHTML = "Firmware file is correct";
} else {
uploadButton.setAttribute('disabled', 'disabled');
esp_message.innerHTML = " OOPS! Incorrect firmware file! Please select correct file.";
}
};
document.getElementById('stm_fw').onchange = function (ev) {
const stm_message = document.getElementById('stm_message');
const FW_PATTERN_BIN = /firmware\.bin$/g;
const FW_PATTERN_ELRS = /firmware\.elrs$/g;
const uploadButton = document.getElementById('stm_submit');
const address = document.getElementById('stm_addr');
const value = ev.target.value;
address.classList.add('hide');
if (FW_PATTERN_BIN.test(value)) {
uploadButton.removeAttribute('disabled');
address.classList.remove('hide');
stm_message.innerHTML = "Note: DFU flashing will be used";
} else if (FW_PATTERN_ELRS.test(value)) {
uploadButton.removeAttribute('disabled');
stm_message.innerHTML = "Firmware file is correct";
} else {
uploadButton.setAttribute('disabled', 'disabled');
stm_message.innerHTML = " OOPS! Incorrect firmware file! Please select correct file.";
}
};
</script>
<hr>
<div align="left">
<legend>
<h2>Useful Links and Support:</h2>
</legend>
<h4><a href="https://github.com/AlessandroAU/ExpressLRS">GitHub Repository</a><h4>
<h4><a href="https://discord.gg/dS6ReFY">Discord Chat</a><h4>
</div>
</div>
</section>
</body>
</html>